<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableExpose } from '@/components/Table'
import { selDeptName ,selBackUserList, updBackUserEnabled , selJurisdiction} from '@/api/table'
import { TableData } from '@/api/table/types'
import { ref, h, reactive, unref , onMounted} from 'vue'
import { ElTag, ElMessage , ElButton,ElMessageBox,ElRow ,ElCol,ElTree,ElSwitch} from 'element-plus'
import { useTable } from '@/views/Order/OrderList'
import { Pagination, TableColumn, TableSlotDefault } from '@/types/table'
import { Form } from '@/components/Form'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { Descriptions } from '@/components/Descriptions'
import {FormSchema, FormSetPropsType} from "@/types/form";

//树形组件↓↓↓↓↓
let data = ref();

//树形菜单数据
selDeptName({}).then((res) =>{
    data.value = [res.data]
});

const defaultProps = {
    children: 'children',
    label: 'menuName'
}

// 表头
const columns = reactive<TableColumn[]>([
    {
        field: '',
        label: '序号',
        type: 'index'
    },
    {
        field: 'trueName',
        label: '用户姓名'
    },
    {
        field: 'avatarUrl',
        label: '用户头像'
    },
    {
        field: 'sex',
        label: '性别'
    },
    {
        field: 'account',
        label: '用户账号'
    },
    {
        field: 'deptName',
        label: '所属部门'
    },
    {
        field: 'enabled',
        label: '是否启用'
    },
    {
        field: 'status',
        label: '账号状态'
    },
    {
        field: 'registerTime',
        label: '注册时间'
    },
    {
        field: 'action',
        label: '操作'
    }
])

//表数据↓↓↓↓↓
const { register, tableObject, methods } = useTable<TableData>({
    getListApi: selBackUserList,
    response: {
        list: 'list',
        total: 'total'
    },
    props: {
        columns
    },
    defaultParams: {

    }
})

//调用方法
const { getList ,setSearchParams } = methods;

getList()

//查询组件
const schema = reactive<FormSchema[]>([
    {
        field: 'account',
        label: '用户账号：',
        component: 'Input'
    },
    {
        field: 'trueName',
        label: '用户姓名：',
        component: "Input"
    },
    {
        field: 'deptName',
        label: '所属部门：',
        component: "Input"
    },
    {
        field: 'registerTime',
        label: '注册时间：',
        component: "DatePicker",
        componentProps: {
            type: 'date',
            format: 'YYYY/MM/DD',
            valueFormat: 'YYYY-MM-DD'
        }
    }
])
let str = "trueName";

//左表查询
function NodeClick(a){
    // setSearchParams(a.id)
    selBackUserList({"deptId":a.id}).then((res) =>{
        console.log(res.data)
        tableObject.tableList = res.data
        tableObject.total = res.data.length
    });
}


const rowData = (data: TableSlotDefault) => {
    console.log(data)
}

//停用账号
function stopEnable(row) {
    console.log(row.enabled)
    updBackUserEnabled({"enabled":row.enabled,"userId":row.userId}).then((res) =>{
        if (res) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        }else {
            ElMessage.error('修改失败')
        }

    });
}

//查看
const lookOver = ref(false)

//权限
const purview = ref(false)

const des = reactive<DescriptionsSchema[]>([
    {
        field: 'username',
        label: '角色名',
        width: "80px",
        span: 24
    },
    {
        field: 'power',
        label: '拥有权限',
        width: "80px",
        span: 24
    }
])

let purviewData = ref();
let desData;

//点击权限按钮的事件
function purviewRowData(row){
    selJurisdiction({"userId":row.userId}).then((res) => {
        console.log(res.data.user.true_name);
        purviewData.value = res.data;
        desData = reactive({
            "username" : res.data.user.true_name
        })
    })
}




//编辑
const edit = ref(false)

//封停
const shutDown = ref(false)

</script>

<template>
    <ElRow>
        <!--    左    -->
        <ElCol :span="4">
            <el-tree :data="data" :props="defaultProps" default-expand-all="true" @node-click="NodeClick" style="height: 195px" />
        </ElCol>
        <!--    右    -->
        <ElCol :span="20">
            <!-- 查询表单 -->
            <ContentWrap :title="`筛选查询`">
                <Search
                        :expand="true"
                        :expandField=str
                        :schema="schema"
                        @search="setSearchParams"
                        @reset="setSearchParams"
                />
            </ContentWrap>

            <br>

            <ContentWrap :title="`后台管理员数据列表`">
                <Table
                        border="1px"
                        v-model:pageSize="tableObject.pageSize"
                        v-model:currentPage="tableObject.currentPage"
                        :columns="columns"
                        :data="tableObject.tableList.slice((tableObject.currentPage-1)*tableObject.pageSize,tableObject.currentPage*tableObject.pageSize)"
                        :loading="tableObject.loading"
                        @register="register"
                        :pagination="{total: tableObject.total}"
                >

                    <!--用户头像-->
                    <template #avatarUrl="{row}">
                        <img src="row.avatarUrl">
                    </template>

                    <!--是否启用-->
                    <template #enabled="{row}">
                        <ElSwitch
                                v-model="row.enabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                @change="stopEnable(row)"
                                :inactive-value="2">
                        </ElSwitch>
                    </template>

                    <!--账号状态-->
                    <template #status="{row}">
                        <ElSwitch
                                disabled
                                v-model="row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="2">
                        </ElSwitch>
                    </template>

                    <template #action="{row}">
                        <ElButton @click="lookOver = !lookOver;rowData(row)" type="primary" link size="small">
                            查看
                        </ElButton>
                        <ElButton @click="purview = !purview;purviewRowData(row)" type="primary" link size="small">
                            权限
                        </ElButton>
                        <br>
                        <ElButton @click="edit = !edit;rowData(row)"  type="primary" link size="small" >
                            编辑
                        </ElButton>
                        <ElButton @click="shutDown = !shutDown;rowData(row)" type="primary" link size="small">
                            封停
                        </ElButton>
                    </template>

                </Table>
            </ContentWrap>

        </ElCol>
    </ElRow>

    <!--查看-->
    <Dialog v-model="lookOver" open-delay="500" title="查看">
2321312
    </Dialog>

    <!--权限-->
    <Dialog v-model="purview" open-delay="500" title="权限">
        <Descriptions :data="desData" :schema="des" >
            <template #username="{row}">
                {{row.username}}
            </template>

            <template #power="{row}">
                {{row.username}}
            </template>
        </Descriptions>

    </Dialog>

    <!--编辑-->
    <Dialog v-model="edit" open-delay="500" title="编辑">
        2321312
    </Dialog>

    <!--封停-->
    <Dialog v-model="shutDown" open-delay="500" title="封停">
        2321312
    </Dialog>

</template>
